<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <!-- 左上区域 -->
      <el-col :span="12">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>区域一</span>
          </div>
          <div class="card-content">
            <!-- 这里放置左上区域的内容 -->
          </div>
        </el-card>
      </el-col>

      <!-- 右上区域 -->
      <el-col :span="12">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>区域二</span>
          </div>
          <div class="card-content">
            <!-- 这里放置右上区域的内容 -->
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <!-- 左下区域 -->
      <el-col :span="12">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>区域三</span>
          </div>
          <div class="card-content">
            <!-- 这里放置左下区域的内容 -->
          </div>
        </el-card>
      </el-col>

      <!-- 右下区域 -->
      <el-col :span="12">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>区域四</span>
          </div>
          <div class="card-content">
            <!-- 这里放置右下区域的内容 -->
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 这里可以添加需要的数据
    }
  },
  methods: {
    // 这里可以添加需要的方法
  }
}
</script>

<style lang="scss" scoped>
.home {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 84px);

  .box-card {
    margin-bottom: 20px;
    border-radius: 8px;

    .card-content {
      min-height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .el-card__header {
    padding: 15px 20px;
    border-bottom: 1px solid #ebeef5;
    box-sizing: border-box;
  }
}
</style>

